<template>
    <div class="box_cont flex_column_between">
        <div class="tit_cont cur" @click="backFn">
            <i class="el-icon-arrow-left"></i>
            <span class="mytext">我的词库 </span>
        </div>
        <div class="words_cont" v-loading="loading">
            <template v-if="listData.length > 0">
                <div class="item flex_center_between" v-for="(item, index) in listData" :key="index">
                    <div class="flex_center">
                        <span class="label">{{ index + 1 }}.{{ item.vocabulary && item.vocabulary.word }}</span>
                        <span class="text">{{ item.vocabulary && item.vocabulary.translation || '' }}</span>
                    </div>
                    <div class="right_cont flex_center cur" v-loading="collectLoading[index] || false" @click="cancelFun(item.id, index)">
                        <img src="@/assets/img/collect_1.png" alt="">
                        <span class="text1">取消收藏</span>
                    </div>
                </div>
            </template>
            <template v-else>
                <empty type="1" text="暂无词汇"></empty>
            </template>
        </div>
        <!-- 分页 -->
        <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                @current-change="changePage" v-if="listData.length > 0"></pagination>
    </div>
</template>

<script>
import empty from '@/views/components/empty.vue'
import pagination from '@/components/pagination'
import { collectList, cancelCollect } from '@/api/vocabulary.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        empty,
        pagination,
        bear_content
    },
    data() {
        return {
            loading:false,
            collectLoading: [],
            listData: {},
            currentPage: 1, // 当前页
            pageSize: 15, // 每页条数
            total: 0, // 总条数
        }
    },
    mounted() {
        this.getList()
    },
    methods:{
        getList() {
            this.loading = true
            collectList({
                page: this.currentPage
            }).then(res => {
                this.loading = false
                if (res.error === 0) {
                    this.listData = res.data.list
                    this.total = res.data.total
                    this.pageSize = res.data.perPage
                }
            })
        },
        cancelFun(id, index) {
            if (this.collectLoading[index])  {
                return
            }
            this.collectLoading = []
            this.collectLoading[index] = true
            cancelCollect({
                id: id
            }).then(res => {
                this.collectLoading[index] = false
                if (res.error === 0) {
                    this.$message.success('取消收藏成功')
                    this.getList()
                }
            }).finally(() => {
                this.collectLoading[index] = false
            })
        },
        changePage(page) {
            this.currentPage = page
            this.getList()
        },
        backFn(){
            this.$router.back()
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

    .box_cont{
        padding: 3.4rem 3.2rem;
        .tit_cont{
            width: 100%;
            text-align: left;
            margin-bottom: 3.4rem;
            font-size: 2.4rem;
            .mytext{
                margin-left: 1.6rem;
            }
        }
    }
    .words_cont{
        width: 100%;
        height: 0;
        flex: 1;
        overflow-y: scroll;

        .item{
            padding: 3.2rem 2.0rem 3.2rem 0;
            color: #3A3F5E;
            border-bottom: .1rem solid #F0F2F4;
            .flex_center{
                .label{
                    font-size: 2.6rem;
                    font-family: Open Sans;
                    display: block;
                    width: 30.0rem;
                }
                .text{
                    font-family: MicrosoftYaHei;
                    font-size: 2.0rem;
                }
            }
            .right_cont{
                .text1{
                    margin-left: 1.6rem;
                    font-size: 1.8rem;
                    color: #F69B2C;

                }
            }
        }
        &::-webkit-scrollbar {
            width: .6rem;
            height: .1rem;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: .5rem;
            background-color:$background-theme;
        }
        &::-webkit-scrollbar-track {
            background: #fff;
            border-radius: .5rem;
        }
    }
    .page_cont{
        margin-top: 3.2rem;
    }
</style>
